<template>
    <el-form-item label="规格设置">
        <table class="border">
            <thead>
                <tr>
                    <th class="border" v-for="(th, thi) in tableThs" :key="thi" :width="th.width" :rowspan="th.rowspan"
                        :colspan="th.colspan">
                        {{ th.name }}
                    </th>
                </tr>
                <tr>
                    <th class="border" v-for="(th, thi) in skuLabels" :key="thi" :width="th.width" :rowspan="th.rowspan"
                        :colspan="th.colspan">
                        {{ th.name }}
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in skus_list" :key="index">
                    <td width="100" class="border borderTac" v-for="(sku, skuI) in item.skus" :key="skuI">{{ sku.value }}</td>
                    <td class="border">
                        <el-input v-model="item.pprice" type="number" size="small"></el-input>
                    </td>
                    <td class="border">
                        <el-input v-model="item.oprice" type="number" size="small"></el-input>
                    </td>
                    <td class="border">
                        <el-input v-model="item.cprice" type="number" size="small"></el-input>
                    </td>
                    <td class="border">
                        <el-input v-model="item.stock" type="number" size="small"></el-input>
                    </td>
                    <td class="border">
                        <el-input v-model="item.volume" type="number" size="small"></el-input>
                    </td>
                    <td class="border">
                        <el-input v-model="item.weight" type="number" size="small"></el-input>
                    </td>
                    <td class="border">
                        <el-input v-model="item.code" type="number" size="small"></el-input>
                    </td>
                </tr>
            </tbody>
        </table>
    </el-form-item>
</template>
<script setup>
import {
    initSkusTable
} from '@/hooks/sku.js'

const {
    skuLabels,
    tableThs,
    skus_list
} = initSkusTable()
</script>
<style scoped lang="less">
.border {
    border: 1px solid black;
}

.borderTac {
    text-align: center;
}
</style>